<template>
  <div id="app">
    <topblock @appfunc="showNotice"></topblock>

    <transition name="notice_fade">
      <notice v-show="notice" @appfunc="close"></notice>
    </transition>

    <navblock></navblock>

    <transition name="fade">
      <router-view></router-view>
    </transition>

    <transition name="car_fade">
      <carblock v-show="car" @appfunc="hideCar"></carblock>
    </transition>

    <footerblock @appfunc="showCar"></footerblock>
  </div>
</template>

<script>
import topblock from './components/TopBlock.vue'
import notice from './views/NoticeView.vue'
import navblock from './components/NavBlock.vue'
import carblock from './components/CarBlock.vue'
import footerblock from './components/FooterBlock.vue'
export default {
  name: 'App',
  data () {
    return {
      notice: false,
      car: false
    }
  },
  methods: {
    showNotice () {
      this.notice = true
    },
    close () {
      this.notice = false
    },
    showCar () {
      this.car = !this.car
    },
    hideCar () {
      this.car = false
    }
  },
  components: {
    topblock,
    notice,
    navblock,
    carblock,
    footerblock
  }
}

</script>

<style lang="scss">
  #app {
    min-width: 320px;
    max-width: 750px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 3.48rem;
    padding-bottom: 1.2rem;

    .fade-enter-active,
    .fade-leave-active {
      transition: all .3s ease;
    }

    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }

    .notice_fade-enter-active,
    .notice_fade-leave-active {
      transition: all .5s ease;
    }

    .notice_fade-enter,
    .notice_fade-leave-to {
      opacity: 0;
    }

    .car_fade-enter-active,
    .car_fade-leave-active {
      transition: all .3s ease;
    }

    .car_fade-enter {
      transform: translateY(100px);
    }

    .car_fade-leave-to {
      opacity: 0;
    }
  }

</style>
